<template>
	<commonCard>
		<view class="stadiumtableOrder" @click="goOrderDetail">
			<view class="u-flex u-flex-between u-flex-items-center u-m-b-16">
				<view class="u-info f-s-12">订单号：{{stadiumInfo.orderNo}}</view>
				<orderStatus :status="stadiumInfo.status" />
			</view>
			<up-line></up-line>
			<view class="u-m-t-16 u-flex">
				<image :src="stadiumInfo.stadium.imagesList[0]" class="image_size" mode="aspectFill"></image>
				<view class="u-m-l-20 u-flex-1">
					<view class="f-s-18 f-s-14">{{stadiumInfo.stadium.name}}</view>
					<view class="u-info f-s-12 u-m-t-12">{{stadiumInfo.stadiumTable.name}} · {{stadiumInfo.date}}
					</view>
					<view class="u-m-t-12">
						<view class="time_tag" v-for="(time,index) in timeList">
							<up-tag :text="time" size="mini" plain> </up-tag>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-end u-flex-items-center">
				<view class="f-s-14">合计金额：</view>
				<Price :price="(stadiumInfo.money)/100"></Price>
			</view>
		</view>
	</commonCard>
</template>

<script setup>
	import commonCard from '@/components/common_card.vue'
	import orderStatus from '@/components/order/order_status.vue'
	import Price from '@/components/price.vue'
	import {
		ref,
		reactive,
		defineProps
	} from 'vue'
	const props = defineProps({
		stadiumInfo: Object
	})
	const timeList = ref([])
	timeList.value = props.stadiumInfo.time.split(',')

	function goOrderDetail() {
		uni.navigateTo({
			url: '/subPackages/order/details/stadum_detail?orderNo=' + props.stadiumInfo.orderNo
		})
	}
</script>

<style lang="scss">
	.stadiumtableOrder {

		.image_size {
			width: 270rpx;
			height: 170rpx;
			background: #D9D9D9;
			border-radius: 8rpx;
		}

		.time_tag {
			display: inline-block;
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}
</style>